<script setup lang="ts">
import { ref, getCurrentInstance, nextTick, onMounted, provide } from "vue";
import inputs from './components/input.vue'
import ListVue from './components/List.vue'
import { useCounterStore } from '@/stores/counter'
// import { storeToRefs } from 'pinia';
let CounterStore = useCounterStore()
// const { proxy } = getCurrentInstance();
let parentData = ref<number>(0)
let showType = ref<boolean>(false)
let Type = ref<string>("")
let inputss = ref()
//清空数量
const myEvent = (e: string) => {
    console.log(e, 'myEvent')
    parentData.value = 0
}
//展示编辑类型弹框
const modifyType = () => {
    showType.value = true
}
provide('showType', { showType, myEvent })
//确认编辑类型
const confirm = () => {
    console.log(inputss.value.unit)
    inputss.value.goUnit(Type.value)
    // proxy.$refs.inputs.unit.value= Type.value
    close()
}
//清空编辑
const close = () => {
    Type.value = ''
    showType.value = false
}
</script>
<template>
    <div class="common-layout">
        <inputs ref="inputss" :parentData="parentData" @myEvent="myEvent"></inputs>
        <el-button @click="parentData++">增加数量</el-button>
        <el-button @click="modifyType">修改类型</el-button>
        <div>
        <ListVue></ListVue>
    </div>
    <!-- <img src="#" alt=""> -->
    </div>
    <el-dialog v-model="showType" title="修改类型" width="1000">

        <el-input v-model="Type" style="width: 200px;" placeholder="Approved by" clearable />
        <div class="dialog-foot">
            <el-button type="primary" @click="confirm">确认</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
    <div>{{ CounterStore.count }}</div>
    <div>{{ CounterStore.doubleCount }}</div>
    <button @click="CounterStore.increment">+++</button>
   
</template>

<style scoped lang="scss">
.common-layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;

}
</style>
